<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .file-box{
            position: relative;
        }
        .file-box input[type=file]{
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 400px;
            height: 35px;    
        }
        .file-mode{
            position: relative;
            display: block;
            width: 400px;
            height: 35px;
            margin: 0 0 15px 0;
            background: #fefefe;
            border: 1px solid #cecece;
            font-size: 12px;
            font-family: sans-serif;
            color: #888;
            border-radius: 4px;
            cursor: pointer;
            overflow: hidden;
            -webkit-box-shadow: rgba(0,0,0,.25) 0 4px 5px -5px inset;
            -moz-box-shadow: rgba(0,0,0,.25) 0 4px 5px -5px inset;
            box-shadow: rgba(0,0,0,.25) 0 4px 5px -5px inset;
            box-sizing: border-box;
        }
        .file-input{
            display: block;
            float: left;
            height: 100%;
            padding-top: 8px;
            padding-left: 10px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .file-button{
            display: block;
            float: right;
            height: 100%;
            padding-top: 8px;
            padding-left: 15px;
            padding-right: 15px;
            border-left: 1px solid #ccc;
            color: #666666;
            text-align: center;
            background-color: #fefefe;
            background-image: -webkit-gradient(linear,0 0,0 100%,from(#fefefe),to(#f1f1f1));
            background-image: -webkit-linear-gradient(top,#fefefe,#f1f1f1);
            background-image: -o-linear-gradient(top,#fefefe,#f1f1f1);
            background-image: linear-gradient(to bottom,#fefefe,#f1f1f1);
            background-image: -moz-linear-gradient(top,#fefefe,#f1f1f1);
            -webkit-transition: all .1s ease-out;
            -moz-transition: all .1s ease-out;
            -o-transition: all .1s ease-out;
            transition: all .1s ease-out;
            box-sizing: border-box;
        }
        .file-select{
            display: none;
            width:400px;
            border-radius: 3px;
            padding:10px;
            background-color:#f8f8f8;
            border: 1px solid #eaeaea;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        .file-select .file-icon{
            float: left;
            color: #fa8f1f;
            font-size: 31px;
            margin-right: 20px;
            line-height: 35px;
        }
        .file-info{
            float:left;
            color: #3f3f3f;
        }
        .file-name{
            font-size: 16px;
            font-weight: bold;
        }
        .file-else{
            font-size: 12px;
        }
        .file-select .del-icon{
            float: right;
            font-size: 27px;
            line-height: 35px;
            color: #8f8f8f;
        }
    </style>    
</head>

<body>
    <div class="page-container">
        <form method="post" enctype="multipart/form-data" id="upLoadForm">
            <div class="file-box">
                <input type="file" name="file" id="fileFiler">
                <div class="file-mode">
                    <div class="file-input"><span>请选择要上传的文件</span></div>
                    <div class="file-button">选择文件</div>
                </div>
                <div class="file-select clearfix">
                    <i class="Hui-iconfont Hui-iconfont-log file-icon"></i>
                    <div class="file-info">
                        <div class="file-name" id="fname">123.zip</div>
                        <div class="file-else">
                            size：<span id="fsize">10.5kb</span>
                            &nbsp;&nbsp;&nbsp;
                            type：<span id="ftype">zip</span>
                        </div>
                    </div>
                    <!-- <i class="Hui-iconfont Hui-iconfont-del2 del-icon"></i> -->
                </div>
            </div>            
            <input type="button" class="btn btn-custom btn-success" value="上传" id="uploadBtn">
        </form>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer/1.9.3/layer.js"></script>
    <script src="file.js"></script>
</body>

</html>